<!-- 上传进度条组件 -->
<template>
  <transition name="slide">
    <div v-if="show">
      <div class="flex justify-between">
        <div class="text-sm text-gray-400 mb-3">
          文件上传中
        </div>
        <div
          class="text-sm text-red-400 mb-2 cursor-pointer"
          @click="cancelUpload"
        >
          取消上传
        </div>
      </div>
      <el-progress :percentage="progress" />
    </div>
  </transition>
</template>

<script setup>
import to from "await-to-js"
import http from "@/utils/js/http.js"
import { defineProps, defineEmits, reactive } from "vue"
import { ElMessageBox, ElMessage } from "element-plus"
const props = defineProps({
    progress: {
        type: Number,
        default: 0,
    },
    show: {
        type: Boolean,
        default: true,
    },
})
const emit = defineEmits(["cancel"])
const cancelUpload = async () => {
    const [err, res] = await to(
        ElMessageBox.confirm("确定要取消上传吗", {
            type: "warning",
        })
    )
    if (err) {
        return
    }
    http.cancelUpload()
    emit("cancel")
    ElMessage("已取消上传")
}
</script>

<style lang="scss" scoped></style>
>
